<template>
  <div class="per-account">
    <el-divider><span class="expl-writing">修改密码</span></el-divider>
    <el-button type="primary" @click="dialogVisible = true" plain class="btn">修改密码</el-button>

    <el-dialog title="修改密码" :visible.sync="dialogVisible" :append-to-body="true">

      <el-form :model="form" ref="forms" :rules="rules">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="form.oldPassword" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPassword">
          <el-input v-model="form.confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancleBtn">取 消</el-button>
        <el-button type="primary" @click="submitForm('forms')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updatepass } from '@/api/login'
export default {
  data() {
    // 校验密码
    let validatePass = (rule, value, callback) => {
      callback() // 成功则放行
    }
    //新密码
    let newPassword = (rule, value, callback) => {
      let ipupass = /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/
      if (!ipupass.test(value)) {
        callback(new Error('密码至少包含字母、数字,6~20位'))
      } else {
        callback()
      }
    }
    // 确认密码
    let checkpass = (rule, value, callback) => {
      if (value == this.form.newPassword) {
        callback()
      } else {
        callback('确认密码错误')
      }
    }
    return {
      rules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { validator: validatePass, message: '原密码不正确', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: newPassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: checkpass, trigger: 'blur' }
        ]
      },
      dialogVisible: false,

      form: {
        confirmPassword: '',
        newPassword: '',
        oldPassword: '',
        userId: ''
      }
    }
  },
  methods: {
    // 提交修改
    submitForm(form) {
      this.$refs[form].validate(valid => {
        // 校验通过
        if (valid) {
          updatepass(this.form).then(res => {
            console.log(res)
            if (res.data.code == 200) {
              this.dialogVisible = false
              this.$message('成功', 'success')
            }
          })
        } else {
          this.$message('校验失败', 'error')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.per-account {
  position: relative;
  padding: 30px 30px 0 30px;
  .expl-writing {
    font-size: 16px;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.6);
  }
  .btn {
    margin-top: 90px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    background-color: #71c9ce;
    color: #fff;
    &:hover {
      border-color: #71c9ce;
    }
  }
}
:deep(.el-dialog) {
  width: 45%;
  border-radius: 8px;
  .el-dialog__body {
    padding: 10px 30px;
  }
  .el-dialog__footer {
    padding-bottom: 30px;
    text-align: center;
    .el-button {
      padding: 10px 25px;
      border: none;
    }
    .el-button--primary {
      background: #71c9ce;
    }
    .cancleBtn {
      &:hover {
        color: #71c9ce;
        background-color: none;
      }
    }
  }
}
</style>